﻿<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" href="../../css/global.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="../../css/app.css" />
		<script src="../../js/getURLParam.js"></script>
		<style>
		.chart {
				height: 200px;
				margin: 0px;
				padding: 0px;
			}
		</style>
	</head>
	<body class="bodyback">
		<div id="load" style="text-align: center;">
			<img src="../../images/loading.gif" style="vertical-align:middle"/>正在加载...
		</div>
		<div id="hiddenDiv" style="visibility:hidden;">
			<img src="../../images/drawable-hdpi/singlecar_img.png" style="width: 100%;"/>
			<img class="mui-pull-left vclheadpic" id="vclhead" style="width: 80px;height:80px;" src="../../images/drawable-ldpi/record_default1.png" >
			<span class="vclbaseinfosapn" id="vcluser">
				&nbsp;
					<!--<a href="#" onclick="tel:8888"><img src="../../images/drawable-hdpi/tel_grey.png" style="width: 30px;height: 30px;position: relative;top: 10px;"/></a>-->
			</span>				
			<span class="vclbaseinfosapn" id="vclbaseinfo">&nbsp;</span>
			<hr/>
			<span class="vclbaseinfosapn" id="egntype">&nbsp;</span>
			<button type="button" class="mui-btn" id="focus" style="height: 25px; float:left; margin-left:-68px;margin-top:-10px;font-size:11px;" >关注状态</button>
			<div style="background-color: #51000;color:#51000;text-align: center;font-size: 13px;">
				<table style="width: 100%;height: 140px;background-image: url(../../images/drawable-ldpi/car_bg.png);background-position-x: center;background-position-y:center;background-repeat: no-repeat;background-size: 75%;" >
						<tr style="height:50%">
							<td style="width:25%;">
							近七天里程<img style="width:12px;height:12px" src="../../images/youbiao.png"/>
								&nbsp;<span id="7runkm"></span>
							</td>
							<td >
							</td>
							<td style="width:25%;">
								近七天油耗<img style="width:13px;height:13px" src="../../images/youxiang.png"/>
								<span id="7oil"></span>
							</td>
							</tr>
						<tr style="height:10%">
							<td></td>
							<td>
								平均油耗<br />
								<span id="7peroil"></span>
							</td>
							<td></td>
						</tr>
						<tr>
							<td></td>
							<td></td>
							<td></td>
						</tr>
				</table>
				<table style="width: 100%;margin-top:-20px">
					<tr style="background-color: white;">
						<td><img id="lastPosition" src="../../images/drawable-hdpi/position_gray.png" style="width: 50%;"/></td>
						<td><img id="workreport" src= "../../images/drawable-hdpi/worklog_selected.png" style="width: 50%;"/></td>
						<td id="curtfltimg" style="display: none;"><img id="curtflt" src="../../images/drawable-ldpi/failure_gray.png" style="width: 50%;"/></td>
						<td><img id="runTrunk" src="../../images/drawable-ldpi/track_gray.png" style="width: 50%;"/></td>
					</tr>
					<tr style="background-color: white;">
						<td>最新位置</td>
						<td>工作日志</td>
						<td id="curflttxt" style="display: none;">现行故障</td>
						<td>行驶轨迹</td>
					</tr>
				</table>
			</div>
			
			<div class="chart" id="barChart" style="padding-bottom:5px;"></div>	
		</div>
		<script src="../../js/mui.min.js"></script>
		<script src="../../libs/echarts-all.js"></script>
		<script type="text/javascript" charset="utf-8">
			mui.init({
				swipeBack: true //启用右滑关闭功能
				
			});
			 var isflt=GetQueryString("isflt");
			var sessionid=GetQueryString("sessionid");
			var accountid=GetQueryString("accountId");
	        var proversion=GetQueryString("proVersion");
	        var vclid=GetQueryString("vclid");
	         var vclnum=GetQueryString("vclnum");
	        (function($){
			  	if(isflt=="1"){
			  		document.getElementById("curflttxt").style.display="block";
			  		document.getElementById("curtfltimg").style.display="block";
			  	}
			 })(mui);
	        var isatn="";//机构名称
	        var hourvalue = document.getElementById("hourvalue");//累计工作小时
	        var oilvalue = document.getElementById("hourvalue");//累计油耗
	        //var keyontype = document.getElementById("keyontype");
	        var vclbaseinfo = document.getElementById("vclbaseinfo");
	        var focus = document.getElementById("focus");
	        var vcluser = document.getElementById("vcluser");
	        var egntype = document.getElementById("egntype");
	        var runkm = document.getElementById("7runkm");
	        var peroil = document.getElementById("7peroil");
	        var oil = document.getElementById("7oil");
	        var iolarr=new Array();
	        var workhourarr=new Array();
	        var perworkharr=new Array();
	        var workdatearr=new Array();
	        var vclnum ="";
	        var vclrear ="";
	        var vclegn ="";
	        var vcldri ="";
	        var user="";
	        var phone = "";
	        var oemName="";//生产厂家
	        //ajax请求获取单车档案信息
			mui.ajax('../../../APP/vclfiles', {
				//mui.ajax('../../../APP/vclfiles', {
				data: {
					param: '{"proVersion":"' + proversion + '","accountId":"' + accountid + '","sessionid":"' + sessionid + '","data":{"vclId":"' + vclid + '"}}'
				},
				dataType: 'jsonp', //服务器返回json格式数据
				type: 'post', //HTTP请求类型
				timeout: 100000, //超时时间设置为10秒；
				success: function(data) {
					var jsonObj = window.JSON.parse(data);
					//document.getElementById("test").innerText=data;
					if (jsonObj.resultCode == "1") {
						//获取返回数据的data
						var resultdata = jsonObj.data;
						if (null != resultdata) {
							oemName=resultdata.facname;
							vclnum=resultdata.vclnum;
							vclrear=resultdata.rearar;
							user=resultdata.carowner;
							phone=resultdata.carownerphone;
							var telImgString="";
							var onclickString="";
							if(oemName!=""){
								if(oemName.indexOf("福田")>-1){
									document.getElementById("vclhead").src="../../images/oemImg/Foton.png"
								}else if(oemName.indexOf("东风")>-1){
									document.getElementById("vclhead").src="../../images/oemImg/dongfeng.png"
								}else if(oemName.indexOf("江淮")>-1){
									document.getElementById("vclhead").src="../../images/oemImg/jianghuai.png"
								}else if(oemName.indexOf("辽宁曙光")>-1){
									document.getElementById("vclhead").src="../../images/oemImg/liaoningshuguang.png"
								}else if(oemName.indexOf("通运重工")>-1){
									document.getElementById("vclhead").src="../../images/oemImg/tongyunzhonggong.png"
								}else {
									document.getElementById("vclhead").src="../../images/oemImg/default.png"
								}
							}
							if(phone!=""&&null!=phone){
								telImgString="tel_blue.png";
								onclickString='onclick=call('+phone+')';
							}else{
								telImgString="tel_grey.png";
								onclickString="";
							}
							if(resultdata.carowner!=null && resultdata.carowner!=""){
								var tel = '<span  '+onclickString+' style="padding-left:10px">'+resultdata.carowner+'<img src="../../images/drawable-hdpi/'+telImgString+'" style="width: 30px;height: 30px;position: relative;top: 10px;"/></span>'
								vcluser.innerHTML=tel;
							}else{
								var tel = '<span '+onclickString+' style="padding-left:10px">--<img src="../../images/drawable-hdpi/'+telImgString+'" style="width: 30px;height: 30px;position: relative;top: 10px;"/></span>'
								vcluser.innerHTML=tel;
								vcluser.style.color="#999999"
							}
							var basein="";
							if(resultdata.facname!=null && resultdata.facname!=""){
								basein+=resultdata.facname;
							}else{
								basein+="--";
							}
							vcldri=resultdata.drivetype;
							if(resultdata.drivetype!=null && resultdata.drivetype!=""){
								basein+="&nbsp;&nbsp;&nbsp;"+resultdata.drivetype;
							}else{
								basein+="&nbsp;&nbsp;&nbsp;--";
							}
							vclbaseinfo.innerHTML=basein;
							var egn ="康明斯&nbsp;&nbsp;";
							if(resultdata.esntype!=null && resultdata.esntype!=""){
								egn+=resultdata.esntype;
							}else{
								egn+="--";
							}
							vclegn=resultdata.esnnum;
							if(resultdata.esnnum!=null && resultdata.esnnum!=""){
								egn+="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"+resultdata.esnnum;
							}else{
								egn+="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;--";
							}
							egntype.innerHTML=egn;
							isatn=resultdata.isatn;
							if(resultdata.isatn=="1"){
					        	focus.innerHTML="取消关注";
					        }else{
					        	focus.innerHTML="添加关注";
					        }
					        runkm.innerHTML=resultdata.tolkm+"km";
					        oil.innerHTML=resultdata.toloil+"L";
					        peroil.innerHTML=resultdata.tolperkmoil+"L/100km";
					        document.getElementById("load").style.display="none";
					        document.getElementById("hiddenDiv").style.visibility="visible";
					        
						} else {
						}
			
					} else {
						//curtflt.innerHTML = "请求出错!" + jsonObj.resultCode;
					}
				},
				error: function(xhr, type, errorThrown) {
				}
			});
			mui.ajax('../../../APP/Chart', {
				//mui.ajax('../../../APP/Chart', {
					data: {
						param: '{"proVersion":"' + proversion + '","accountId":"' + accountid + '","sessionid":"' + sessionid + '","data":{"vclid":"' + vclid + '"}}'
					},
					dataType: 'jsonp', //服务器返回json格式数据
					type: 'post', //HTTP请求类型
					timeout: 10000, //超时时间设置为10秒；
					success: function(data) {
						var jsonObj = window.JSON.parse(data);
						if (jsonObj.resultcode == "1") {
							//获取返回数据的data
							var resultdata = jsonObj.data
							jsondata = jsonObj.data;
							if (resultdata.length > 0) {
								//获取每台设备的数据
								//var table = document.getElementById("table");
								var lengt = resultdata.length;
								var j=0;
								var n=0;
								if((lengt-7)>=0){
									j=lengt-7;
									for (var i=lengt-1; i >= (lengt-7); i--) {
										workdatearr[n]=jsondata[j].workdate;
										if(jsondata[j].runoil!=null && jsondata[j].runoil!="--" && jsondata[j].runoil!=""){
											iolarr[n]=jsondata[j].runoil;
										}else{
											iolarr[n]="0";
										}
										if(jsondata[j].runkm!=null && jsondata[j].runkm!="--" && jsondata[j].runkm!=""){
											workhourarr[n]=jsondata[j].runkm;
										}else{
											workhourarr[n]="0";
										}
										if(jsondata[j].perkmoil!=null && jsondata[j].perkmoil!="--" && jsondata[j].perkmoil!=""){
											perworkharr[n]=jsondata[j].perkmoil;
										}else{
											perworkharr[n]="0";
										}
										n++;
										j++;
									}
								}else{
									
								}
							getechars();
						} else {
						//	document.getElementById("test").innerHTML=jsonObj.resultcode;
						}
					} else {
					}
				},
				error: function(xhr, type, errorThrown) {
					//异常处理；
					//f.innerHTML = "error";
				}
			});
			//处理点击事件，需要打开原生浏览器
			mui('body').on('tap', 'a', function(e) {
				var href = this.getAttribute('href');
				if (href) {
					if (window.plus) {
						plus.runtime.openURL(href);
					} else {
						location.href = href;
					}
				}
			});
			//添加/取消关注
			function getfocus(){
				var atnType="";
				if(isatn=="1"){//已经被关注；点击按钮为取消关注
					atnType="0";
				}else{//点击按钮为添加关注
					atnType="1";
				}
				//ajax请求关注接口
				mui.ajax('../../../APP/atnFtn', {
					//mui.ajax('../../../APP/atnFtn', {
					data: {
						param: '{"proVersion":"' + proversion + '","accountId":"' + accountid + '","sessionid":"' + sessionid + '","data":{"vclId":"' + vclid + '","type":"'+atnType+'"}}'
					},
					dataType: 'jsonp', //服务器返回json格式数据
					type: 'post', //HTTP请求类型
					timeout: 10000, //超时时间设置为10秒；
					success: function(data) {
						var jsonObj = window.JSON.parse(data);
						if (jsonObj.resultCode == "1") {
							//获取返回数据的data
							if(atnType=="0"){
								focus.innerHTML="添加关注";
								isatn="0";
								postLog("单车档案-取消关注",accountid,proversion);
							}else{
								focus.innerHTML="取消关注";
								isatn="1";
								postLog("单车档案-添加关注",accountid,proversion)
							}
						} else {
							//focus.innerHTML=jsonObj.resultCode;	
						}
					},
					error: function(xhr, type, errorThrown) {
						}
					});
				
			}
			function setMain(vclID){//新oc与h5交互
				window.webkit.messageHandlers.testfun11.postMessage(vclID);
				//window.location.href='../s';
			}
			function dial() {
				plus.device.dial(userphone, false);
			}
			function goedit(){
				mui.toast(vclnum+vclrear+vclegn+vcldri+user+phone);
				//设备号、发动机号、后桥速比、驱动类型、联系人、电话
				//var param="";
				var param = vclnum+","+vclegn+","+vclrear+","+vcldri+","+user+","+phone;
				mui.openWindow("vclbaseinfo.html?&vclid="+vclid+"&sessionid="+sessionid+"&proversion="+proversion+"&accountid="+accountid+"&param="+param,"vclbaseinfo.html")
			}
			function getechars(){
			var getOption = function(chartType) {
				var chartOption = chartType == 'pie' ? {
					calculable: false,
				} : {
					legend: {
						data: ['油耗','里程', '百公里油耗']
					},
					grid: {
						x: 50,
						x2: 60,
						y: 50,
						y2: 25
					},
					toolbox: {
						show: true,
						feature: {
							mark: {
								show: false
							},
							dataView: {
								show: false,
								readOnly: false
							},
							magicType: {
								show: false,
								type: ['line', 'bar']
							},
							restore: {
								show: false
							},
							saveAsImage: {
								show: false
							}
						}
					},
					calculable: false,
					xAxis: [{
						splitLine:{
							show:false
						},
						type: 'category',
						data: [workdatearr[0],workdatearr[1],workdatearr[2],workdatearr[3],workdatearr[4],workdatearr[5],workdatearr[6]]
					}],
					yAxis: [{
						type: 'value',
						name: '油耗/里程',
						min: 0,
						axisLabel: {
							formatter: '{value}'
						},
						splitLine:{
							show:false
						}
					}, {
						type: 'value',
						name: '百公里油耗',
						min: 0,
						max: 100,
						axisLabel: {
							formatter: '{value}'
						},
						splitLine:{
							show:false
						}
					}],
					series: [
						{
							name: '油耗',
							type: 'bar',
							data: [iolarr[0],iolarr[1],iolarr[2],iolarr[3],iolarr[4],iolarr[5],iolarr[6]],
							itemStyle: {  
		                        normal: {  
		                            label: {  
		                                show: true/*,//是否展示  
		                                textStyle: {  
		                                    fontWeight:'bolder',  
		                                    fontSize : '10',  
		                                    fontFamily : '宋体',  
		                                }  */
		                            }  
		                        }  
                   			 },
						},
						{
							name: '里程',
							type: 'bar',
							data: [workhourarr[0],workhourarr[1],workhourarr[2],workhourarr[3],workhourarr[4],workhourarr[5],workhourarr[6]],
							itemStyle: {  
                        normal: {  
                            label: {  
                                show: true/*,//是否展示  
                                textStyle: {  
                                    fontWeight:'bolder',  
                                    fontSize : '10',  
                                    fontFamily : '宋体',  
                                }  */
                            }  
                        }  
                    },
						},
						{
							name: '百公里油耗',
							type: 'line',
							yAxisIndex: 1,
							//smooth:true,
							data: [perworkharr[0],perworkharr[1],perworkharr[2],perworkharr[3],perworkharr[4],perworkharr[5],perworkharr[6]],
							itemStyle: {  
                        normal: {  
                            label: {  
                                show: true,//是否展示  
                                position:'top'
                                /*textStyle: {  
                                    fontWeight:'bolder',  
                                    fontSize : '10',  
                                    fontFamily : '宋体',  
                                } */ 
                            }  
                        }  
                    },
						}
					]
				};
				return chartOption;
			};
				var byId = function(id) {
				return document.getElementById(id);
			};
				var barChart = echarts.init(byId('barChart'));
				//自适应
				//window.onresize = echarts.resize;  
				barChart.setOption(getOption('bar'));
				//document.getElementById("dd").innerHTML=da;
			}
			function getBeforeDate(n) {
				var n = n;
				var d = new Date();
				var year = d.getFullYear();
				var mon = d.getMonth() + 1;
				var day = d.getDate();
				if (day <= n) {
					if (mon > 1) {
						mon = mon - 1;
					} else {
						year = year - 1;
						mon = 12;
					}
				}
				d.setDate(d.getDate() - n);
				year = d.getFullYear();
			
				mon = d.getMonth() + 1;
			
				day = d.getDate();
				s = year + "-" + (mon < 10 ? ('0' + mon) : mon) + "-" + (day < 10 ? ('0' + day) : day);
				return s;
			}
			document.getElementById("focus").addEventListener("tap",getfocus);
			function golastposition(){//最新位置
				window.location.href="pages/map2.html?sessionid="+sessionid+"&accountid="+accountid+"&proversion="+proversion+"&vclid="+vclid;
			}
			function goworkreport(){//工作日志
				window.location.href="vclworkreortlog.html?sessionid="+sessionid+"&accountid="+accountid+"&proversion="+proversion+"&vclid="+vclid;
			}
			function gocurtflt(){//现行故障
				window.location.href="vclCurFlt.html?sessionid="+sessionid+"&accountid="+accountid+"&proversion="+proversion+"&vclid="+vclid+"&vclnum="+vclnum;
			}
			
			function gotrack(){//行驶轨迹
				var  nowtime=getBeforeDate(0);
				window.location.href="pages/vcltrack.html?sessionid="+sessionid+"&accountId="+accountid+"&proVersion="+proversion+"&vclId="+vclid+"&bgnTime="+nowtime+"&endTime="+nowtime;
			}
			//最新位置交互
			document.getElementById("lastPosition").addEventListener("tap",function(){
				window.webkit.messageHandlers.lastPosition.postMessage(vclid+"");
			});
			//工作日志交互
			document.getElementById("workreport").addEventListener("tap",function(){
				window.webkit.messageHandlers.workreport.postMessage(vclid+"");
			});
			//现行故障
			document.getElementById("curtflt").addEventListener("tap",function(){
				window.webkit.messageHandlers.curtflt.postMessage(vclid+"_"+vclnum);
			});
			//行驶轨迹
			document.getElementById("runTrunk").addEventListener("tap",function(){
				var  nowtime=getBeforeDate(0);
				window.webkit.messageHandlers.runTrunk.postMessage(vclid+"_"+nowtime+"_"+nowtime);
			});
			function call(num){
				window.webkit.messageHandlers.vclsinglecall.postMessage(num);
			}
		</script>
	</body>

</html>